<!DOCTYPE html>
<html >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<script src="jquery-3.4.1.min.js"></script>
		<script>
					$(function(){/*?*/
						//1、系统管理  
						$("input:first").click(function(){
							$("p:first input").each(function(){
								if($("input:first").prop("checked")){
									$(this).prop("checked", true);
								}else{
									$(this).prop("checked", false);
								}
							});
						});
						
						$("p:first input").each(function(){
							$("p:first input").bind("click",function(){
							var checkedNmu=$("p:first input:checked").length;
								if(checkedNmu>0){
									$("input:eq(0)").prop("checked",true);
								}else{
									$("input:eq(0)").prop("checked",false);
								}
							});
						});
						
						//2、鲜花订单管理  
						$("h2:eq(1) input").click(function(){
							$("p:eq(1) input").each(function(){
								if($("h2:eq(1) input").prop("checked")){
									$(this).prop("checked", true);
								}else{
									$(this).prop("checked", false);
								}
							});
						});
					
						$("p:eq(1) input").each(function(){
							$("p:eq(1) input").bind("click",function(){
							var checkedNum1=$("p:eq(1) input:checked").length;
								if(checkedNum1>0){
									$("h2:eq(1) input").prop("checked",true);
								}else{
									$("h2:eq(1) input").prop("checked",false);
								}
							});
						});
						
						//3、客户管理   
						$("h2:eq(2) input").click(function(){
							$("p:eq(2) input").each(function(){
								if($("h2:eq(2) input").prop("checked")){
									$(this).prop("checked", true);
								}else{
									$(this).prop("checked", false);
								}
							});
						});
						
						$("p:eq(2) input").each(function(){
							$("p:eq(2) input").bind("click",function(){
							var checkedNum1=$("p:eq(2) input:checked").length;
								if(checkedNum1>0){
									$("h2:eq(2) input").prop("checked",true);
								}else{
									$("h2:eq(2) input").prop("checked",false);
								}
							});
						});
						
						//4、全选
						var i=0;
						$("input[type='button']").click(function(){
							i++;
							if(i%2!=0){
								$("input[type='checkbox']").each(function(){
						$("input[type='checkbox']").prop("checked",true);
							});
							
							
							}else{
								$("input[type='checkbox']").each(function(){
						$("input[type='checkbox']").prop("checked",false);
							});
							}
						});
					});/*?*/
			</script>


	</head>
	<body>
		<div id="menu">
			<h2><input type="checkbox" name="role" value="101" />系统管理</h2>
			<p>
				<input type="checkbox" name="role" value="101001" />用户管理
				<input type="checkbox" name="role" value="101002" />参数管理
				<input type="checkbox" name="role" value="101003" />权限管理
				<input type="checkbox" name="role" value="101004" />日常管理
				<input type="checkbox" name="role" value="101005" />财务管理
			</p>
			<hr />
			<h2><input type="checkbox" name="role" value="102" />鲜花订单管理</h2>
			<p>
				<input type="checkbox" name="role" value="102032" />增加订单
				<input type="checkbox" name="role" value="102013" />订单发货
				<input type="checkbox" name="role" value="102015" />在线结算
				<input type="checkbox" name="role" value="102016" />原料管理
			</p>
			<hr />
			<h2><input type="checkbox" name="role" value="103" />客户管理</h2>
			<p>
				<input type="checkbox" name="role" value="103032" />增加用户
				<input type="checkbox" name="role" value="103032" />查找用户
				<input type="checkbox" name="role" value="103012" />用户维护
				<input type="checkbox" name="role" value="103012" />生日祝贺
				<input type="checkbox" name="role" value="103012" />删除用户
			</p>
		</div>
		<p>
			<input type="button" value="全选" />
			<input type="submit" value="提交" />
			<input type="reset" value="重置" />
		</p>
		<hr />
		<p>
			1:实现 全选 全不选 功能（通过点击 全选 按钮）<br />
			2：选中h2中的大项，对应后面的小项 全部选中；取消选中，则小项全部取消；<br />
			3:选中小项，则其对应的大项选中，如果小项都未选中，则大项不选。<br />
			4：不能采用固定value 的方式，比如$(":checkbox[value=1001]")这样的格式
		</p>
	</body>
</html>
